﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="main/public :: #public_head">

</head>
<body>
<!--头部-->
<header class="publicHeader" th:replace="main/public :: #public_header">

</header>
<!--时间-->
<section class="publicTime" th:replace="main/public :: #public_time">

</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left" th:replace="main/public :: #public_left(activeUri='user')">
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 >> 用户添加页面</span>
        </div>
        <div class="providerAdd">
            <!--一个超级大表单，守最下面js控制-->
            <form id="addForm" th:action="@{/user}" th:method="post" action="#">
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="username">用户名：</label>
                    <input type="text"  name="username" id="username" autofocus="autofocus" required/>
                    <span id="s_username">*请输入用户名，且不能重复</span>
                </div>
                <div>
                    <label for="realName">真实姓名：</label>
                    <input type="text" name="realName" id="realName"/>
                    <span >*请输入真实姓名</span>
                </div>
                <div>
                    <label for="userpassword">用户密码：</label>
                    <input type="text"  name="userpassword" id="userpassword"/>
                    <span class="ck" id="ck1">*密码长度必须以英文开头大于3位小于10位</span>

                </div>
                <div>
                    <label for="password">确认密码：</label>
                    <input type="text" name="password" id="password"/>
                    <span id="pwdText" class="ck2">*请输入确认密码</span>
                </div>
                <div>
                    <label >用户性别：</label>

                    <select name="gender">
                        <option value="1">女</option>
                        <option value="2">男</option>
                    </select>
                    <span></span>
                </div>
                <div>
                    <label for="birthday">出生日期：</label>
                    <input type="text" name="birthday" id="birthday"/>
                    <span >*格式 yyyy-MM-dd </span>
                </div>
                <div>
                    <label >用户类别：</label>
                    <input type="radio" name="userType" value="1" />管理员
                    <input type="radio" name="userType" value="2" checked/>经理
                    <input type="radio" name="userType" value="3"/>普通用户
                </div>
                <div class="providerAddBtn">

                    <!--验证码-->
                    <div >
                        <div >
                            <div >
                                <input  type="tel" id="verify_input" placeholder="请输入验证码" maxlength="4">
                            </div>
                        </div>
                        <div >
                            <a href="javascript:void(0);" title="点击更换验证码">
                                <!--src无误-->
                                <img id="imgVerify" src="loginCode/getVerify" alt="更换验证码" height="36" width="170" onclick="getVerify(this);">
                            </a>
                        </div>
                        <!--最下面还有个js代码控制提交-->
                        <input type="button"  id="save" onclick="aVerify()" value="保存">
                    </div>


                    <script type="text/javascript" src="./js/jquery.js"></script>
                    <script>

                        //获取验证码
                        /*function getVerify(obj){
                            obj.src =  "login/getVerify?"+Math.random();//原生js方式
                        }*/

                        //获取验证码
                        function getVerify() {
                            // $("#imgCode").on("click", function() {
                            $("#imgVerify").attr("src", 'loginCode/getVerify?' + Math.random());//jquery方式
                            // });
                        }

                        function aVerify(){
                            //全局变量传递

                            var value =$("#verify_input").val();
                            // alert(value);
                            $.ajax({
                                async: false,
                                type: 'post',
                                url: 'loginCode/checkVerify',
                                dataType: "json",
                                data: {
                                    verifyInput: value
                                },
                                success: function (result) {
                                    if (result)
                                        jud = 1;

                                     else
                                        jud = 0;

                                        //$("#save").attr("disabled", true);

                                    // window.location.reload();
                                    getVerify();

                                }
                            });
                        }
                    </script>

                    <!--<a href="#">保存</a>-->
                    <!--<a href="userList.html">返回</a>-->


<!--                    <input type="button" id="save" value="保存" />-->
                    <input type="button" value="返回" onclick="history.back(-1)"/>


                </div>
            </form>
        </div>
    </div>
</section>
<footer class="footer" th:replace="main/public :: #public_footer">
</footer>
<script th:src="@{/webjars/jquery/3.3.1/jquery.js}" src="../js/jquery.js">
    jud = 0;
    jud2 = 0;
    jud3 = 0;
</script>

<script type="text/javascript">
    //检验用户名是否存在，需要查找数据库，故需要ajax
    $(function () {
        //theymeleaf行内表达式

        $("#username").blur(function () {
            var un = $("#username").val();
            var url = "checkExist/"+ un;
            $.ajax({
                url: url,
                dataType: 'json',
                method: 'GET',
                success: function (data) {//data由后端返回true或false
                    jud3 = data;

                    if(jud3)
                        $("#s_username").replaceWith("<span id='s_username' style='color: green'>用户名可用</span>");
                    else
                        $("#s_username").replaceWith("<span id='s_username' style='color: red'>用户名已存在</span>");
                },
                error: function () {
                   //
                }
            });
        })
    })

</script>

<script type="text/javascript">
    //动态检验
    var reg = /^[a-zA-Z][a-zA-Z0-9]{3,8}/;//以字母开头，后面[3,8]位
    $("#userpassword").blur(function () {//不能写onblur！onblur是js的
        if( $("#userpassword").val().trim() == '' ||
            reg.test($("#userpassword").val()) == false )
            $("#ck1").replaceWith("<span id='ck1' style='color: red'>*密码长度必须以英文开头大于3位小于10位</span>");
        else
            $("#ck1").replaceWith("<span id='ck1' style='color: green'>*密码格式正确</span>");
    });

    $("#password").blur(function () {
        if( $("#userpassword").val().trim() == '' ||
            $("#password").val().trim() == '' ||
            $("#userpassword").val() != $("#password").val() ||
            reg.test($("#userpassword").val()) == false)
            $("#pwdText").replaceWith("<span id='pwdText' style='color: red'>*密码不一致</span>");
        else
            $("#pwdText").replaceWith("<span id='pwdText' style='color: green'>*密码一致</span>");
    });

</script>


<script type="text/javascript">
    $(function () {
        //正则
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,8}/;//以字母开头，后面[3,8]位

        //点击 确定

        $('#save').click(function () {
            //校验密码
            if($("#userpassword").val().trim() == '' ||
                $("#password").val().trim() == '' ||
                $("#userpassword").val() != $("#password").val() ||
                reg.test($("#userpassword").val()) == false ) {
                $("#pwdText").replaceWith("<span id='pwdText' style='color: red'>*请按要求输入正确的密码.</span>");
                jud2 = 0;
                return;
            }
            else
                jud2 = 1;

            if (jud  && jud2 && jud3) {
                alert("添加成功")
                $("#addForm").submit();
            }
            if(jud == 0)
                alert("验证码错误！")
            if(jud3 == 0)
                alert("用户名已存在！")


        });

    });
</script>
<!--
	<script src="js/time.js"></script>
	-->
</body>
</html>